<template>
  <div class="error-box flex-col-center">
    <div class="error-body flex-col-center">
      <div class="header">
        <H1>404 Not Found</H1>
        <YImage :src="imageUrl"></YImage>
        <div>很抱歉,没有找到页面!😰</div>
      </div>
      <div class="body" style="margin-top: 10px">
        <MiButton @click="$router.go(-1)">返回</MiButton>
      </div>
    </div>
  </div>
</template>

<script>
import BackButton from "@/components/button/BackButton.vue";
import MiButton from "@/components/button/MiButton.vue";
import YImage from "@/components/image/YImage.vue";

export default {
  name: "404Error",
  components: {YImage, MiButton, BackButton},
  data() {
    return {
      imageUrl: require('/src/static/img/emotion/notFound.gif')
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.error-box {
  width: 100%;
  height: 100vh;
  background-color: black;

  .error-body {
    padding-bottom: 10px;
    width: 30%;
    background-color: gainsboro;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
  }
}
</style>